<template>
  <el-submenu
    ref="subMenu"
    :index="handlePath(item.path)"
    :popper-append-to-body="false"
    :disabled="item.meta.disabled"
  >
    <template slot="title">
      <i v-if="item.meta && item.meta.icon && item.meta.icon.includes('el-icon')" :class="[item.meta.icon, 'sub-el-icon']" />
      <svg-icon v-else-if="item.meta && item.meta.icon" :icon-class="item.meta.icon ? item.meta.icon : ''" />
<!--      <svg-icon-->
<!--        v-if="item.meta && item.meta.remixIcon"-->
<!--        :icon-class="item.meta.remixIcon"-->
<!--        class="vab-remix-icon"-->
<!--      />-->
      <span style="margin-left: 5px">{{ item.meta.title }}</span>
    </template>
    <slot />
  </el-submenu>
</template>

<script>
import { isExternal } from '@/utils/validate'
import path from 'path'

export default {
  name: 'VabSubmenu',
  props: {
    routeChildren: {
      type: Object,
      default() {
        return null
      }
    },
    item: {
      type: Object,
      default() {
        return null
      }
    },
    fullPath: {
      type: String,
      default: ''
    }
  },
  methods: {
    handlePath(routePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(this.fullPath)) {
        return this.fullPath
      }
      return path.resolve(this.fullPath, routePath)
    }
  }
}
</script>

<style lang="scss" scoped>
 .sub-el-icon {
   color: $base-menu-color;
   margin-right: 0;
 }
 ::v-deep {
   .el-menu-item-group__title {
     padding-left: 0 !important;
   }
 }
</style>
